<template>
  <!-- 容器 -->
  <div class="charts" ref="charts"></div>
</template>

<script>
// 引入echarts
import echarts from 'echarts';
export default {
    name:'',
    mounted() {
        // 初始化echarts实例
        //console.log(echarts,'echarts');
        let lineCharts = echarts.init(this.$refs.charts);
        // 配置数据
        lineCharts.setOption({
            xAxis:{
                show:false,//隐藏x轴
                type:'category',//均分
            },
            yAxis:{
                show:false,//隐藏y轴
            },
            series:[
                {
                    type:'line',
                    smooth:true,
                    data:[20,7,33,12,48,9,29,10,44],
                    // 拐点样式设置
                    itemStyle:{
                        opacity:0
                    },
                    // 线条颜色设置
                    lineStyle:{
                        color:"purple",
                    },
                    // 填充颜色设置
                    areaStyle:{
                        color:{
                            type:'linear',
                            x:0,
                            y:0,
                            x2:0,
                            y2:1,
                            colorStops:[
                                {
                                    offset:0,
                                    color:'purple',
                                },
                                {
                                    offset:1,
                                    color:'#fff',
                                }
                            ],
                            global:false,
                        }
                    }
                }
            ],
            // 调试布局
            grid:{
                left:0,
                top:0,
                right:0,
                bottom:0
            }
        })
    },
}
</script>

<style scoped>
.charts {
    width:100%;
    height: 100%;
}
</style>